<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>菜单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="./static/css/font.css">
    <link rel="stylesheet" href="./static/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./static/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <STYLE>
        .fatherDiv{
            width: 85%;
            padding-left: 7.5%;
        }
        #foodTypeUl{
            padding-left: 70px;
            margin-bottom: 0px;
        }
        #foodContent{
            background-color: #F8F8F8;
            padding-left: 40px;
            padding-top: 40px;
            height: 600px;
        }
        .foodContainer{
            border: 1px solid lightgray;
            text-align: center;
            background-color: white;
            width: 190px;
            height: 270px;
            margin-left: 30px;
            margin-bottom: 15px;
        }
        .foodContainer div{
            margin-top: 10px;

        }
        .foodContainer img{
            margin: 5px auto;
        }
        .foodPrice{
            color: rgb(240, 43, 43);
        }
        #cart img{
            margin: 0px 10px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
        #cart{
            cursor: pointer;
            position: fixed;
            width: 70px;
            height: 70px;
            bottom: 50px;
            right: 20px;
            z-index: 99;
        }
        .addBtn span{
            display: none;
        }
    </STYLE>
</head>

<body>
<div class="fatherDiv">
    <input name="tableId" id="tableId" type="hidden" value="${param.tableId}">
    <input name="orderId" id="orderId" type="hidden" >
    <div class="layui-tab layui-tab-card" style="width: 99%;margin-top: 0px">
        <ul class="layui-tab-title" id="foodTypeUl">

        </ul>
        <div class="layui-tab-content" id="foodContent">
            <div class="layui-tab-item layui-show foodContent" id="foodContent0">
                <%-- <div class='layui-col-md2 foodContainer' id='food"+this.foodId+"'>
                     <img  src="/upload/mapodoufu.jpg" width="170px" height="150px" alt="">
                     <div class="foodName"><h3>麻婆豆腐</h3></div>
                     <div class="foodPrice">￥13元</div>
                     <div>
                         <button class="layui-btn layui-btn-danger layui-btn-sm add"><i class="layui-icon"></i>来一份</button>
                     </div>
                 </div>--%>

            </div>
        </div>
    </div>
    <%--底部购物车--%>
    <div id="cart">
        <a onclick="x_admin_show('购物车','${pageContext.request.contextPath}/foreground?m=cartPage&tableId=${param.tableId}',1000,750)">
            <span class="layui-badge" id="totalCount">0</span>
            <img src="/upload/cart.jpg"/>
        </a>
    </div>
</div>





<script>
    function showOrderFood(){
        // 获取当前餐桌的订单食品信息
        $.ajax({
            type:"post",
            url:"${pageContext.request.contextPath}/foreground?m=findOrderFoodByOrderID",
            dataType:"json",
            data:{orderId:$("#orderId").val()},
            success:function (data) {
                if (data.code === 200){
                    $(".foodCount").hide();
                    $(".foodCount").text(0);
                    var totalCount = 0;
                    $(data.data).each(function () {
                        $("#foodCount"+this.foodId).show();
                        $("#foodCount"+this.foodId).text(this.foodCount);
                        totalCount = totalCount+this.foodCount;
                    });
                    $('#totalCount').text(totalCount);
                }
            }
        });
    };

setInterval("showOrderFood()",200);

    layui.use(['table','form','element','jquery','util'], function () {
        var util = layui.util
            ,laydate = layui.laydate
            ,$ = layui.$
            ,layer = layui.layer;


        var tableId = $("#tableId").val();


        // 获取菜品分类数据
        $.ajax({
            type:"post",
            url:"${pageContext.request.contextPath}/foreground?m=findAllFoodTypeInUse",
            dataType:"json",
            success:function (data) {
                if (data.code === 200){
                    $("#foodTypeUl").empty();
                    $("#foodTypeUl").append("<li value='0'  class='layui-this'>全部</li>");
                    $(data.data).each(function () {
                        $("#foodTypeUl").append("<li value='"+this.foodTypeCode1+"'  class='foodTypeLi'>"+this.foodTypeName+"</li>")
                        $("#foodContent").append("<div class='layui-tab-item foodContent' id='foodContent"+this.foodTypeCode1+"'></div>");
                    });
                }
            }
        });


        // 获取所有菜品数据 获取当前餐桌的食品信息
        $.ajax({
            async:false,
            type:"post",
            url:"${pageContext.request.contextPath}/foreground?m=findAllFood",
            dataType:"json",
            success:function (data) {
                if (data.code === 200){
                    if (data.count%7 == 0){
                        var h = parseInt(data.count/7)-1;
                        $("#foodContent").height(h*290+350);
                    }else {
                        var h = parseInt(data.count/7);
                        $("#foodContent").height(h*290+350);
                    }
                    $(".foodContainer").empty();
                    $(data.data).each(function () {
                        $("#foodContent0").append("<div class='layui-col-md2 foodContainer' id='food"+this.foodId+"'></div>");
                        $("#food"+this.foodId).append('<img  src="/upload/'+this.foodImg+'" width="170px" height="150px" alt="">\n' +
                            '                <div class="foodName"><h5>'+this.foodName+'</h5></div>\n' +
                            '                <div class="foodPrice">￥'+this.foodPrice+'元</div>\n' +
                            '                <div>\n' +
                            '<button class="layui-btn layui-btn-normal layui-btn-sm addBtn" value="'+this.foodId+'"><i class="layui-icon"></i>来一份<span class="layui-badge foodCount" id="foodCount'+this.foodId+'">0</span></button>\n' +
                            '                </div>')
                    });

                }
            }
        });


        // 根据分类获取菜品数据
        $('#foodTypeUl').on('click','li',function () {
            var foodTypeCode1=$(this).val();
            $(".foodContent").empty();
            $.ajax({
                type:"post",
                url:"${pageContext.request.contextPath}/foreground?m=findFoodListByParam",
                dataType:"json",
                data:{foodTypeCode1:foodTypeCode1},
                success:function (data) {
                    if (data.code === 200){
                        if (data.count%7 == 0){
                            var h = parseInt(data.count/7)-1;
                            $("#foodContent").height(h*290+350);
                        }else {
                            var h = parseInt(data.count/7);
                            $("#foodContent").height(h*290+350);
                        }
                        $(data.data).each(function () {
                            if (foodTypeCode1 == 0){
                                $("#foodContent0").append("<div class='layui-col-md2 foodContainer' id='food"+this.foodId+"'></div>");
                            }else {
                                $("#foodContent"+this.foodTypeCode).append("<div class='layui-col-md2 foodContainer' id='food"+this.foodId+"'></div>");
                            }
                            $("#food"+this.foodId).append('<img src="/upload/'+this.foodImg+'" width="170px" height="150px" alt="">\n' +
                                '                <div class="foodName"><h5>'+this.foodName+'</h5></div>\n' +
                                '                <div class="foodPrice">￥'+this.foodPrice+'元</div>\n' +
                                '                <div>\n' +
                                '<button class="layui-btn layui-btn-normal layui-btn-sm addBtn" value="'+this.foodId+'"><i class="layui-icon"></i>来一份<span class="layui-badge foodCount" id="foodCount'+this.foodId+'">0</span></button>\n' +
                                '                </div>')
                        });
                        showOrderFood();
                    }
                }
            });
        });

        // 获取当前餐桌的订单id
        $.ajax({
            async: false,
            type:"post",
            url:"${pageContext.request.contextPath}/foreground?m=findOrderIdByTableID",
            dataType:"json",
            data:{tableId:tableId},
            success:function (data) {
                if (data.code === 200){
                    $('#orderId').val(data.data);
                }
            }
        });

        window.onload= showOrderFood();

        /*点击来一份按钮数字+1*/
        $(document).on('click','.addBtn',function(){
            // 改变页面上的数字
            var val = $(this).children().eq(1).text();
            var foodId = $(this).val();
            $(this).children().eq(1).show();
            $(this).children().eq(1).text(parseInt(val)+1);
            // 将数据传递到后台
            $.ajax({
                type: "post",
                url: "${pageContext.request.contextPath}/foreground?m=addOrderFood",
                dataType: "json",
                data: {
                    tableId:tableId,
                    foodCount:val,
                    foodId:foodId
                },
                success: function (jsonData) {
                    if (jsonData.code === 200) {
                        $('#totalCount').text(jsonData.count);
                    }
                }
            });

        });
    });

</script>
</body>

</html>